<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录-农业知识交流论坛</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_nt9nesp62ub.css">

</head>
<body>
<div class="container">
<div class="login-main row">
    <div class="main-content col-12 col-sm-10 col-md-8 col-lg-4">
        <div class="formDiv">
            <h2 class="text-center">登录</h2>
            <form th:action="@{/login}" method="post" class="layui-form">
                <div class="dataform">
                    <div class="input-group">
                        <i class="iconfont icon-denglu"></i>
                        <input id="userName" name="username" type="text" class="layui-input" required placeholder="账号"
                               maxlength="64" autocomplete="off">
                    </div>
                    <div class="error-content">
                        <span id="userNameErr" class="errMsg"></span>
                    </div>

                    <div class="input-group">
                        <i class="iconfont icon-mima"></i>
                        <div class="layui-input-inline" style="width: 100%;">
                            <input class="layui-input" type="password" name="password" placeholder="密码" id="pwd" maxlength="20"
                                   required>
                            <i class="layui-icon layui-icon-eye" id="togglePassword" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"></i>
                        </div>
                    </div>
                    <div class="error-content">
                        &emsp;<span id="passwordErr" class="errMsg" th:if="${param.error}"
                              th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></span>
                    </div>

                    <div class="btn-warp gap">
                        <div class="text-center">
                            <input type="hidden" value="jsform" id="_app">
                            <button type="submit" id="btnLogin" class="layui-btn layui-btn-radius layui-btn-normal lgbtn">登录</button>
                        </div>
                    </div>
                    <div class="gap">

                        <div class="pull-right" style="margin-top: 6px"><a th:href="@{/findpwd}" class="link">忘记密码</a>
                            <span class="split-space">|</span><a th:href="@{/register}" class="link">新用户注册</a></div>

                        <div class="pretty-box">
                            <input type="checkbox" name="remember" title="记住我" lay-skin="primary">
                        </div>
                    </div>

                    <div class="biggap third-party-title">
                        <h5 class="text-center"><span></span></h5>
                    </div>



                </div>
            </form>
        </div>
    </div>

    <div th:replace="~{common/footer::footer}"></div>
</div>

</div>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    layui.use('form', function(){
        var form = layui.form;
    });

    // 添加密码可见性切换功能
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('pwd');
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.classList.toggle('layui-icon-eye');
        this.classList.toggle('layui-icon-eye-invisible');
    });
</script>
<style>
    .input-group {
        position: relative;
        margin-bottom: 15px;
    }
    .input-group .iconfont {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        color: #666;
    }
    .input-group .layui-input {
        padding-left: 35px;
    }
    .input-group .layui-input-inline {
        width: 100%;
    }
</style>
</body>
</html>